{{#> page-main-section page-main-section--modifier="pf-m-light"}}
  {{#> content}}
    {{#> title titleType="h1" title--modifier="pf-m-2xl"}}
      Stacked form demo
    {{/title}}
    <p>Below is an example of a stacked form.</p>
  {{/content}}
{{/page-main-section}}
{{#> page-main-section page-main-section--modifier="pf-m-light"}}
  {{#> form form--id="stacked-labels-1" form--modifier="pf-m-limit-width"}}
    {{#> form-alert}}
      {{#> alert alert--modifier="pf-m-danger pf-m-inline" alert--attribute='aria-label="Inline danger alert"'}}
        {{#> alert-icon alert-icon--type="exclamation-circle"}}
        {{/alert-icon}}
        {{#> alert-title}}
          {{#> screen-reader}}Danger alert:{{/screen-reader}}
          Please address the errors in your form to proceed
        {{/alert-title}}
      {{/alert}}
    {{/form-alert}}
    {{#> form-group}}
      {{#> form-group-label}}
        {{#> form-label form-label--attribute=(concat 'for="' form--id '-form-name"') required='true'}}
          Full name
        {{/form-label}}
      {{/form-group-label}}
      {{#> form-group-control}}
        {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'required type="text" id="' form--id '-form-name" name="' form--id '-form-name" aria-invalid="true" aria-describedby="' form--id '-form-name-helper"')}}
        {{/form-control}}
        {{#> form-helper-text form-helper-text--modifier="pf-m-error" form-helper-text--attribute=(concat 'id="' form--id '-form-name-helper-name" aria-live="polite"')}}
          This is a required field.
        {{/form-helper-text}}
      {{/form-group-control}}
    {{/form-group}}
    {{#> form-group}}
      {{#> form-group-label}}
        {{#> form-label form-label--attribute=(concat 'for="' form--id '-form-email"') required="true"}}
          Email
        {{/form-label}}
      {{/form-group-label}}
      {{#> form-group-control}}
        {{#> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="patternfly.com" id="' form--id '-form-email" name="' form--id '-form-email" required')}}{{/form-control}}
      {{/form-group-control}}
      {{#> form-helper-text form-helper-text--modifier="pf-m-error" form-helper-text--attribute=(concat 'id="' form--id '-form-email-helper-email" aria-live="polite"')}}
        Please enter a valid email address: example@email.com
      {{/form-helper-text}}
    {{/form-group}}
    {{#> form-group}}
      {{#> form-group-label}}
        {{#> form-label form-label--attribute=(concat 'for="' form--id '-form-state"') required='true'}}
          State of residence
        {{/form-label}}
      {{/form-group-label}}
      {{#> form-control controlType="select" form-control--attribute='required aria-invalid="true" id="select-group-error" name="select-group-error" aria-label="Error state select group example"'}}
          <option value="">Select a state</option>
          <option value="Option 1">CA</option>
          <option value="Option 2">FL</option>
          <option value="Option 3">MA</option>
          <option value="Option 4">NY</option>
      {{/form-control}}
      {{#> form-helper-text form-helper-text--modifier="pf-m-error" form-helper-text--attribute=(concat 'id="' form--id '-form-email-helper-state" aria-live="polite"')}}
        This is a required field
      {{/form-helper-text}}
    {{/form-group}}
    {{#> form-group}}
      {{#> form-group-label form-group-label--modifier="pf-m-no-padding-top"}}
        {{#> form-label form-label--attribute=(concat 'for="' form--id '-form-experience"') required='true'}}
          How can we contact you?
        {{/form-label}}
        {{#> form-helper-text form-helper-text--modifier="pf-m-error" form-helper-text--attribute=(concat 'id="' form--id '-simple-form-info-helper-contact" aria-live="polite"')}}
          {{#> form-helper-text-icon}}
            <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
          {{/form-helper-text-icon}}
          This is a requied field
        {{/form-helper-text}}
      {{/form-group-label}}
      {{#> form-group-control form-group-control--modifier="pf-m-inline"}}
        {{#> check}}
          {{#> check-input check-input--attribute='type="checkbox" id="alt-form-checkbox1" name="alt-form-checkbox1"'}}{{/check-input}}
          {{#> check-label check-label--attribute='for="alt-form-checkbox1"'}}Email{{/check-label}}
        {{/check}}
        {{#> check}}
          {{#> check-input check-input--attribute='type="checkbox" id="alt-form-checkbox2" name="alt-form-checkbox2"'}}{{/check-input}}
          {{#> check-label check-label--attribute='for="alt-form-checkbox2"'}}Phone{{/check-label}}
        {{/check}}
        {{#> check}}
          {{#> check-input check-input--attribute='type="checkbox" id="alt-form-checkbox3" name="alt-form-checkbox3"'}}{{/check-input}}
          {{#> check-label check-label--attribute='for="alt-form-checkbox3"'}}Mail{{/check-label}}
        {{/check}}
      {{/form-group-control}}
    {{/form-group}}
    {{#> form-group form-group--modifier="pf-m-action"}}
      {{#> form-group-control}}
        {{#> form-actions}}
          {{#> button button--modifier="pf-m-primary" button--IsSubmit="true"}}
            Submit form
          {{/button}}
          {{#> button button--modifier="pf-m-secondary" button--IsReset="true"}}
            Cancel
          {{/button}}
        {{/form-actions}}
      {{/form-group-control}}
    {{/form-group}}
  {{/form}}
{{/page-main-section}}
